<!DOCTYPE HTML>
<html lang="en-us">
<head>
	<meta charset="utf-8">
	<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

	<title> 智能互联，成就卓越物流 </title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Use the correct meta names below for your web application
		 Ref: http://davidbcalhoun.com/2010/viewport-metatag 
		 
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">-->
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<!-- Basic Styles -->
	<link rel="stylesheet" type="text/css" media="screen" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../css/font-awesome.min.css">

	<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
	<link rel="stylesheet" type="text/css" media="screen" href="../css/smartadmin-production.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../css/smartadmin-skins.css">
    
	<!-- G7 fix -->
	<link rel="stylesheet" type="text/css" media="screen" href="../css/demo-increase.css">
    
	<!-- SmartAdmin RTL Support is under construction
	<link rel="stylesheet" type="text/css" media="screen" href="../css/smartadmin-rtl.css"> -->
	<!-- daterangepicker Styles  -->
	<link rel="stylesheet" type="text/css" media="screen" href="../css/daterangepicker-bs3.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../css/demo.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../js/plugin/splite/split-pane.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery.multiselect2side.css">
	<!-- FAVICONS -->
	<link rel="shortcut icon" href="../img/favicon/favicon.ico" type="../image/x-icon">
	<link rel="icon" href="../img/favicon/favicon.ico" type="../image/x-icon">

	
	<style type="text/css">	
	.jarviswidget>div{ background: none!important; border: 0;}
		body{ background: #001d34; color: #fff;}
		body,form,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,ol,ul,li,tr,td,th,a,footer{ font-size: 28px; line-height: 150%;}
		.txt-color-red{ color: #f00!important;}
		.screen-time{ font-size: 72px; font-weight: bold;}
		.number_lg{ margin-left: 20px; font:bold 60px/80px "Arial";}
		.no-padding-left{ padding-left: 0;}
		.padding-left-10{ padding-left: 10px;}
		.titfsize{ font-size: 30px!important;}
		.versup{vertical-align:text-bottom;}
		.btn-lg{ font-size: 24px;}
		.emphasis-txt{ color: #72ff67;}
		.btn-primary:hover, .btn-primary:focus,.btn-primary:active, .btn-primary.active{background-color: #3276B1;border-color: #2C699D;color: #FFFFFF; cursor: auto;}
		.table-bordered{ border-bottom: 3px solid #4387bf!important;}
		.table-bordered>thead>tr,
		.table-bordered>tbody>tr{ border-left: 3px solid #4387bf!important;border-right: 3px solid #4387bf!important;}
		/*.table-striped>tbody>tr:nth-child(odd)>td{ background: #000c15;}*/
		.table-striped>tbody>tr:nth-child(odd)>td{ background:none;}
		/*.table-striped>tbody>tr:nth-child(odd){ background: #000c15;}*/
		.table-bordered,
		.table-bordered>thead>tr>td,
		.table-bordered>tbody>tr>td,
		.table-bordered>tfoot>tr>td{ border: 1px solid #193f5d;}

		.table-bordered>thead>tr>th,
		.table-bordered>tbody>tr>th,
		.table-bordered>tfoot>tr>th{border: 1px solid #3a7cb2;}
		.fc-border-separate thead tr,
		.table thead tr{ background: #4387bf;}
		.table-hover>tbody>tr:hover>td,
		.table-hover>tbody>tr:hover>th{background: #000;}
		.table>thead>tr>.active,.table>tbody>tr>.active,
		.table>tfoot>tr>.active,
		.table>thead>.active>td,
		.table>tbody>.active>td,
		.table>tfoot>.active>td,
		.table>thead>.active>th,
		.table>tbody>.active>th,
		.table>tfoot>.active>th{
			background:#000;
		}
		.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{ padding: 8px 10px;}
		footer{ color: #c4e4ff;}
		.modal{ overflow-y:auto; color: #333; }
		.modal-header h4{font-size: 17px;}
		.modal-body label,.ms2side__div,.ms2side__options>p,.ms2side__updown>p{font-size: 13px!important;}
		.form-control{ padding: 0 10px; height: 28px;}
		.input-group-addon{ padding: 0 10px!important; height: 28px;}
		.input-group{ line-height: 22px; width: 200px;}
		.ms2side__div select{ height: 200px!important; width: 220px;}
		/*.ms2side__header{ width: 220px; font-weight: normal; color: #999;}*/
		.ms2side__options{ padding-top:98px;}
		.ms2side__updown{ padding-top:48px;}
		/*.modal-dialog{ width: 950px;}*/
		.input-group>.input-group{font-size: 13px;}
		/*.searchable_header{ color: #333; font-size: 14px;}*/
		.table-animate {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);-webkit-transition: -webkit-transform 1400ms cubic-bezier(0.42, 0, 0.58, 1);-moz-transition: -moz-transform 1400ms cubic-bezier(0.42, 0, 0.58, 1);transition: transform 1400ms cubic-bezier(0.42, 0, 0.58, 1);-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
		/*.table-animate:hover,*/
		.hover {-webkit-transform: rotateX(360deg);-moz-transform: rotateX(360deg);transform: rotateX(360deg);}
		
		

	</style>
</head>
<body onload="initialize()">
<section id="widget-grid">
	<!-- row -->
	<div class="row">
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget no-margin jarviswidget-color-darken" id="wid-id-0" data-widget-sortable="true" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-attstyle="jarviswidget-color-darken">
				<!-- <header>
					<h2> <i class="fa fa-table"></i> 车辆到港报表 </h2>
				</header> -->
				<!-- widget div-->
				<div>
					<section class="mainbg">
						<div class="row">
							<div class="col-xs-4 padding-10">
								<p class="titfsize">2014年6月18日 星期三</p>
								<p class="titfsize">农历 五月廿一</p>
							</div>
							<div class="col-xs-4 text-center">
								<p class="screen-time no-margin">10 : 34 : 21</p>
								<!-- <p><span class="txt-color-red">今日忌：</span> 服药、求医、栽种、动土、迁移</p>
 -->							</div>
							<div class="col-xs-4 text-right padding-10 titfsize">
								<p>页面将于 19 秒后刷新</p>
								<div>
									<div class="btn-group">
										<a href="" type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#myModal">
											<i class="fa fa-cog"></i> 设置
										</a>
									</div>
									<div class="btn-group padding-left-10">
										<a href="" type="button" class="btn btn-default btn-md">
											<i class="fa fa-refresh"></i> 刷新
										</a>
									</div>
								</div>

							</div>
						</div>
						<div class="row">
							<div class="col-xs-3 no-padding-left">
								<a class="btn btn-primary titfsize btn-block"><span class="versup">1小时内到港</span><span class="number_lg">1</span></a>
							</div>
							<div class="col-xs-3 no-padding-left">
								<a class="btn btn-primary titfsize btn-block"><span class="versup">2小时内到港</span><span class="number_lg">0</span></a>
							</div>
							<div class="col-xs-3 no-padding-left">
								<a class="btn btn-primary titfsize btn-block"><span class="versup">3小时内到港</span><span class="number_lg">0</span></a>
							</div>
							<div class="col-xs-3 no-padding">
								<a class="btn btn-primary titfsize btn-block"><span class="versup">今日剩余到港</span><span class="number_lg">6</span></a>
							</div>
						</div>
						<div class="padding-top-10"></div>
						<div class="row">
							<table class="table table-striped table-bordered table-hover dataTable no-margin">
								<thead>
									<tr>
										<th width="60"></th>
										<th>车牌号</th>
										<th>出发站</th>
										<th>到达站</th>
										<th>预计到达</th>
										<th>总里程</th>
										<th>剩余里程</th>
										<th width="15%">进度</th>
									</tr>
								</thead>
								<tbody class="t-table">
									<tr class="emphasis-txt">
										<td>1</td>
										<td>京P1234U</td>
										<td>北京集货中心</td>
										<td>广州分拨中心</td>
										<td>12时30分</td>
										<td>1236</td>
										<td>5.8</td>
										<td>
											<div class="progress progress-lg no-margin">
												<div class="progress-bar bg-color-red font-sm" aria-valuetransitiongoal="99" style="width: 99%;line-height:1em" aria-valuenow="99">99%</div>
											</div>
										</td>
									</tr>
									<tr class="emphasis-txt">
										<td>2</td>
										<td>苏K29946</td>
										<td>上海</td>
										<td>广州分拨中心</td>
										<td>18时40分</td>
										<td>2215</td>
										<td>36.5</td>
										<td>
											<div class="progress progress-lg no-margin">
												<div class="progress-bar bg-color-red font-sm" aria-valuetransitiongoal="98" style="width: 98%;line-height:1em" aria-valuenow="98">98%</div>
											</div>
										</td>
									</tr>
									<tr class="emphasis-txt">
										<td>3</td>
										<td>粤SA0878</td>
										<td>沈阳</td>
										<td>广州分拨中心</td>
										<td>22时30分</td>
										<td>1947</td>
										<td>68.6</td>
										<td>
											<div class="progress progress-lg no-margin">
												<div class="progress-bar bg-color-red font-sm" aria-valuetransitiongoal="95" style="width: 95%; line-height:1em" aria-valuenow="95">95%</div>
											</div>
										</td>
									</tr>
									<!-- <tr class="table-animate">
										<td>4</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75" style="width: 75%;" aria-valuenow="75">75%</div>
											</div>
										</td>
									</tr> -->
									<!-- <tr>
										<td>4</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75" style="width: 75%;" aria-valuenow="75">75%</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>5</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="70" style="width: 70%;" aria-valuenow="70">70%</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>6</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50" style="width: 50%;" aria-valuenow="50">50%</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>7</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="40" style="width: 40%;" aria-valuenow="40">40%</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>8</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25" style="width: 25%;" aria-valuenow="25">25%</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>9</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="20" style="width: 20%;" aria-valuenow="20">20%</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>10</td>
										<td>粤SA0878</td>
										<td>西安恒路物流有限公司</td>
										<td>龙岗营业部</td>
										<td>12小时40分钟</td>
										<td>236.86</td>
										<td>5.85</td>
										<td>
											<div class="progress no-margin">
												<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="5" style="width: 5%;" aria-valuenow="5">5%</div>
											</div>
										</td>
									</tr> -->
								</tbody>
							</table>
						</div>
						<div class="row">
							<footer class="padding-10">温馨提示：车辆到港预报。以上信息滚动显示，间隔时间30秒。绿色文字为置顶车辆。如有疑问，请联系柜台客服人员。</footer>
						</div>
					</section>
				</div>
				<!-- end widget div -->
			</div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->
	</div>

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4>大屏显示设置</h4>
				</div>
				<div class="modal-body">
					<form action="" class="smart-form">
						<div class="row">
							
								<section class="col col-4">
									<label for="">字号设置</label>
									<label class="input">
										<label class="select">
											<select class="input-sm">
												<option value="0">20字号</option>
												<option value="1">22字号</option>
												<option value="2">24字号</option>
												<option value="3">26字号</option>
												<option value="4">28字号</option>
												<option value="5">30字号</option>
												<option value="6">32字号</option>
												<option value="7">34字号</option>
												<option value="8">36字号</option>
											</select> <i></i> 
										</label>
									</label>
								</section>
								<section class="col col-4">
									<label for="">刷新频率</label>
									<label class="input">
										<label class="select">
											<select class="input-sm">
												<option value="0">5秒</option>
												<option value="1">10秒</option>
												<option value="2">30秒</option>
												<option value="3">1分</option>
												<option value="4">2分</option>
											</select> <i></i> 
										</label>
									</label>
								</section>
								<section class=" col col-4">
									<label for="">置顶车辆</label>
									<label class="input">
										<label class="select">
											<select class="input-sm">
												<option value="0">1</option>
												<option value="1">2</option>
												<option value="2">3</option>
											</select> <i></i> 
										</label>
									</label>
								</section>						
						</div>
						<hr/>

						<div class="row">
							<div class="col col-12">
								<label for="">查看站点</label>
								<label class="input col-xs-12">
									<label class="select">
										<select class="input-sm">
											<option value="0">上海集货中心</option>
											<option value="1">北京集货中心</option>
											<option value="2">广州集货中心</option>
											<option value="3">沈阳集货中心</option>
											<option value="4">成都集货中心</option>
										</select> <i></i> 
									</label>
								</label>
							</div>
						</div>			
						<!-- <div class="row">
							<section class="col col-12">
								<select name="searchable[]" id='searchable' multiple='multiple' class="searchable" style="height:200px; ">
									<option value='1' selected="selected">排序</option>
									<option value='2' selected="selected">班线名称</option>
									<option value='3' selected="selected">车牌号</option>
									<option value='4' selected="selected" disabled="disabled">出发站</option>
									<option value='5' selected="selected">终点站</option>
									<option value='6' selected="selected" disabled="disabled">预计到达时间</option>
									<option value='7' selected="selected">计划进度</option>
									<option value='8'>挂车</option>
									<option value='9'>班线代码</option>
									<option value='10'>车次号</option>
									<option value='11'>任务状态</option>
									<option value='12'>计划发车时间</option>
									<option value='13'>实际发车时间</option>
									<option value='14'>计划到达时间</option>
									<option value='15'>规定运行时长</option>
									<option value='16'>起点晚发</option>
									<option value='17'>司机1</option>
									<option value='18'>司机2</option>
									<option value='19'>剩余里程</option>
									<option value='20'>规定里程</option>
									<option value='21'>随车电话</option>
									<option value='22'>可用仓位</option>
									<option value='23'>可用吨位</option>
									<option value='24'>重量（吨）</option>
									<option value='25'>体积（方）</option>
									<option value='26'>计划停留时间</option>
								</select>
							</section>

						</div> -->
					</form>
				</div>
				<div class="modal-footer no-margin">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						取消
					</button>
					<button type="button" class="btn btn-primary">
						应用
					</button>
				</div>
			</div>
		</div>
	</div>
	<!-- end row -->
</section>

<!--================================================== -->

	<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
	<script data-pace-options='{ "restartOnRequestAfter": true }' src="../../js/plugin/pace/pace.min.js"></script>-->

	<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
	<script src="../js/libs/jquery-2.0.2.min.js"></script>
	<!--script>
		if (!window.jQuery) {
			document.write('<script src="../js/libs/jquery-2.0.2.min.js"><\/script>');
		}
	</script>

	<script src="../js/libs/jquery-ui-1.10.3.min.js"></script>
	<script>
		if (!window.jQuery.ui) {
			document.write('<script src="../js/libs/jquery-ui-1.10.3.min.js"><\/script>');
		}
	</script-->

	<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
	<script src="../js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

	<!-- BOOTSTRAP JS -->
	<script src="../js/bootstrap/bootstrap.min.js"></script>

	<!-- CUSTOM NOTIFICATION -->
	<script src="../js/notification/SmartNotification.min.js"></script>

	<!-- JARVIS WIDGETS -->
	<script src="../js/smartwidgets/jarvis.widget.min.js"></script>

	<!-- EASY PIE CHARTS -->
	<script src="../js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

	<!-- SPARKLINES -->
	<script src="../js/plugin/sparkline/jquery.sparkline.min.js"></script>

	<!-- JQUERY VALIDATE -->
	<script src="../js/plugin/jquery-validate/jquery.validate.min.js"></script>
	<script src="../js/plugin/jquery-validate/localization/messages_zh.js"></script>
	
	<!-- JQUERY MASKED INPUT -->
	<script src="../js/plugin/masked-input/jquery.maskedinput.min.js"></script>

	<!-- JQUERY UI + Bootstrap Slider -->
	<script src="../js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

	<!-- browser msie issue fix -->
	<script src="../js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

	<!-- SmartClick: For mobile devices -->
	<script src="../js/plugin/smartclick/smartclick.js"></script>

	<script src="../js/plugin/splite/split-pane.js"></script>

	<!--[if IE 7]>

	<h1>你的浏览器版本太低，为了您正常使用本系统，请到此处升级浏览器版本 www.microsoft.com/download</h1>

	<![endif]-->

	<!-- Demo purpose only -->
	<script src="../js/demo.js"></script>

	<!-- MAIN APP JS FILE -->
	
	<script type="text/javascript" src="../js/plugin/iresizer/iframeResizer.contentWindow.min.js"></script> 

	
	<script type="text/javascript" src="http://www.adot.tv/index/js/jquery.min.js"></script>
	<!-- Your GOOGLE ANALYTICS CODE Below -->
	<script type="text/javascript">
		//pageSetUp();//global functions
	
	
	// function loadDataTableScripts() {

	// 	loadScript("../js/plugin/datatables/jquery.dataTables-cust.min.js", dt_2);

	// 	function dt_2() {
	// 		loadScript("../js/plugin/datatables/ColReorder.min.js", dt_3);
	// 	}

	// 	function dt_3() {
	// 		loadScript("../js/plugin/datatables/FixedColumns.min.js", dt_4);
	// 	}

	// 	function dt_4() {
	// 		loadScript("../js/plugin/datatables/ColVis.min.js", dt_5);
	// 	}

	// 	function dt_5() {
	// 		loadScript("../js/plugin/datatables/ZeroClipboard.js", dt_6);
	// 	}

	// 	function dt_6() {
	// 		loadScript("../js/plugin/datatables/media/js/TableTools.min.js", dt_7);
	// 	}

	// 	function dt_7() {
	// 		loadScript("../js/plugin/datatables/DT_bootstrap.js", runDataTables);
	// 	}

	// }


	// PAGE RELATED SCRIPTS
	// loadScript("../js/plugin/jquery-nestable/jquery.nestable.js", runNestables);
	loadScript("../js/plugin/multiselect2side/jquery.multiselect2side.js", runmultiselect2side);
	
	// function runNestables() {
	// 	$('#data_all').nestable({ 
	// 		maxDepth : 1,
	// 		});
	// 	$('#data_select').nestable({
	// 		maxDepth : 1,			
	// 		});
	// 	$('#data_select').on('change', function() {
 //    		/* on change event */
	// 		var list = $('.dd').nestable('serialize');
	// 		console.log(list);
	// 		});
	// }
	function runmultiselect2side() {
		$('#searchable').multiselect2side({
			'search': false,
			'moveOptions': true,
			'selectedPosition': 'right',
			'labelSort': '<i class = "fa fa-sort-alpha-asc"></i>',
			'labelTop': '<i class = "fa fa-caret-square-o-up"></i>',
			'labelBottom': '<i class = "fa fa-caret-square-o-down"></i>',
			'labelUp': '<i class = "fa fa-chevron-up"></i>',
			'labelDown': '<i class = "fa fa-chevron-down"></i>',
			'labelsx': '选择展示项',
			'labeldx': '已选择',
			});

		// $('#searchable1').multiselect2side({
		// 	'search': false,
		// 	'moveOptions': true,
		// 	'selectedPosition': 'right',
		// 	'labelSort': '<i class = "fa fa-sort-alpha-asc"></i>',
		// 	'labelTop': '<i class = "fa fa-caret-square-o-up"></i>',
		// 	'labelBottom': '<i class = "fa fa-caret-square-o-down"></i>',
		// 	'labelUp': '<i class = "fa fa-chevron-up"></i>',
		// 	'labelDown': '<i class = "fa fa-chevron-down"></i>',
		// 	'labelsx': '<div class="input-group" style=" width:140px;"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control" placeholder="搜索" type="text"></div>',
		// 	'labeldx': '已选择',
		// 	});
		};

	// loadScript("../../js/plugin/x-editable/moment.min.js");
	// loadScript("../../js/plugin/x-editable/jquery.mockjax.min.js");
 //    loadScript("../../js/plugin/x-editable/x-editable.min.js");
	
		// $(document).ready(function() {
		// 	//toggle `popup` / `inline` mode
		// 	$.fn.editable.defaults.mode = 'popup';     
			
		// 	//make username editable
		// 	$('#username').editable({
		// 		type: 'text',
		// 		pk: 1,
		// 		//url: '/post',
		// 		title: 'Enter username'									
		// 		});
			
		// 	//make status editable
		// });


		
	</script>
<!-- // 自动播放（面板翻滚切换） -->
<script id="dataTmpl" type="text/tmpl">
		<tr id="buildData#id#" class="table-line table-animate">
			<td>
				#number#
			</td>
			<td>
				#content#
			</td>
			<td>
				#depart#
			</td>
			<td>
				#arrive#
			</td>
			<td>
				#expect#
			</td>
			<td>
				#totalmi#
			</td>
			<td>
				#remainingmi#
			</td>
			<td>
				<div class="progress progress-lg no-margin">
					<div class="progress-bar bg-color-green font-sm" aria-valuetransitiongoal="#progress#" style="width: #progress#%;line-height:1em" aria-valuenow="#progress#">#progress#%</div>
				</div>
			</td>
		</tr>
	</script>
	<script type="text/javascript">

	var processer = {
		index : 4,
		//3. 下面是定义的数据，可以根据你的数据 定义 列数，调结构与样式；
		data : [{id : 1,number : '4',content : '粤H08378',depart : '武汉',arrive : '广州分拨中心',expect:"10时40分",totalmi:"985",remainingmi:"231",progress:"75"},
		{id : 2,number : '5',content : '苏H9239H',depart : '呼和浩特',arrive : '广州分拨中心',expect:"15时30分",totalmi:"1369",remainingmi:"402",progress:"72"},
		{id : 3,number : '6',content : '苏J72348',depart : '苏州',arrive : '广州分拨中心',expect:"16时",totalmi:"1038",remainingmi:"356",progress:"69"},
		{id : 4,number : '7',content : '沪K50878',depart : '上海',arrive : '广州分拨中心',expect:"18时40分",totalmi:"2215",remainingmi:"489",progress:"65"}
		],
		init : function(){
			//4. this.data 更新一下数据来源，$(".t-table")，我的父节点；可根据你自己来调整；
			this.changeData(this.data, $(".t-table"), true);
			setTimeout(this.updateData, 5000, this);
		},
		updateData : function(that){
			for(var i = 0, len = that.data.length;i < len;i++){
				that.data[i]["content"] = that.data[i]["content"].replace(/\d+$/, ++that.index);
			}
			that.changeData(that.data);
			setTimeout(that.updateData, 5000, that);
		},
		changeData : function(data, parent, bool){
			if(data && data.length > 0){
				var htmlArr = [];
				$.each(data, function(index, item){
					item["id"] = item["id"] ? item["id"] : index;

					if(bool){
						htmlArr.push(buildData(item, $("#dataTmpl")));
					} else {
						setTimeout(function(){
							if($("#buildData" + item["id"]).hasClass("hover")){
								$("#buildData" + item["id"]).removeClass("hover").find(".table-content").text(item["content"]);
							} else {
								$("#buildData" + item["id"]).addClass("hover").find(".table-content").text(item["content"]);
							}
						},500 + index * 300);
					}
				});
				console.log(htmlArr);
				if(bool){
					parent.append(htmlArr.join(""));
				}
			}
			function buildData(item, tmpl){
				var reg, html = tmpl.html().replace(/\t|\n|\r/g,"");
				console.log('----',tmpl);
				for(var key in item){
					reg = new RegExp("#" + key + "#", "g");
					html = html.replace(reg, item[key] ? item[key] : "");
				}
				return html;
			}
		}
	};
 	processer.init();
	</script>
<!-- 自动播放（面板翻滚切换）end -->
</body>

</html>